<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div style="width: 50%; height: 300px" ref="pieChartsRef"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pieCharts: null,
      probesData: [],
    }
  },
  created() {},
  mounted() {
    this.initCharts()
    this.getProbeCount()
  },
  methods: {
    // 获取设备总数和在线设备数
    async getProbeCount() {
      const { data: res } = await this.$http.get('baseinfo/probecount')
      if (res.meta.status === 200) {
        this.probesData = res.data.count_list
        console.log(this.probesData)
        this.updateCharts()
      }
    },
    // 初始化饼图
    initCharts() {
      this.pieCharts = this.$echarts.init(this.$refs.pieChartsRef)
      // 指定饼图的基础配置
      var initOption = {
        title: {
          text: '在线设备统计',
          textStyle: {
            fontSize: 16,
          },
          textAlign: 'left',
        },
        series: [
          {
            name: '设备统计',
            type: 'pie',
            radius: '50%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      this.pieCharts.setOption(initOption)
    },
    // 更新饼图数据
    updateCharts() {
      const dataOption = {
        series: [
          {
            data: this.probesData,
          },
        ],
      }
      this.pieCharts.setOption(dataOption)
    },
  },
}
</script>

<style lang="less" scoped></style>
